<template>
	<div class="page">
		<div class="headerTop">
			<span>所属项目:</span>
			<el-select v-model="option" placeholder="所属项目" class="inpu">
				<el-option v-for="item in searchOptions" :key='item.value' :value="item.value" :label="item.label">
				</el-option>
			</el-select>
			<!-- <el-cascader
				class="inpu"
				style="width:5.5rem;"
			    v-model="option"
				:options="products"
				:props="{checkStrictly:true,expandTrigger:'hover',emitPath:false}">
			</el-cascader> -->
			组态名称:
			<el-input type="text" v-model="search_commodity" placeholder="请输入查询关键字" class="inpu"></el-input>
			<el-button type="primary" size="small" @click="searchGoods">查询</el-button>
			<el-button type="primary"  @click="showAll" size="small" v-if="all && grade==3">刷新全部</el-button>
		</div>
		<div class="header_bottom" v-if="grade<=2">
			<el-button type="success" @click="add" size="small" style="float:left;vertical-align:bottom;">添加新组态</el-button>
			<el-button type="primary" @click="showAll" size="small" style="float:left;vertical-align:bottom;" v-if="all">刷新全部</el-button>
		</div>
		<div class="container_table">
			<el-table :data="tabledata" size="small" border style="width: 99.4%;margin-top: 0.1rem;" @row-click="getRow"
			 :header-cell-style="{
				'background-color':tableHead,
				'color': 'white',
                'fontSize':'0.3rem',
				'height':'0.6rem',
				'line-height':'0.6rem',
				'padding':'0.1rem'

             }" :cell-style="{'fontSize':'0.3rem'}">
				<!-- <el-table-column type="selection" min-width="30">
				</el-table-column> -->
				<el-table-column label="ID" prop="id" align="center" min-width="50">
				</el-table-column>
				<el-table-column label="组态名称" align="center" min-width="200">
					<template slot-scope="scope">
						<span >{{scope.row.view_name}}</span><span v-if="scope.row.is_shared==1" class="shareSup" title="这是别人给你分享的组态">分享</span>
					</template>
				</el-table-column>
				<el-table-column label="缩略图" align="center" min-width="80">
					<template slot-scope="scope">
						<a v-if="scope.row.view_thumb" :href="baseurl+scope.row.view_thumb"  target="_blank"><img :src="baseurl+scope.row.view_thumb" style="width:60px;height:40px;vertical-align: middle;" title="点击查看原图" /></a>
						<span v-else style="font-size:0.25rem;">暂无图片</span>
					</template>
				</el-table-column>
				<el-table-column prop="product_name" label="所属项目" align="center" min-width="160">
				</el-table-column>
				<!-- <el-table-column prop="view_type" label="组态类型" align="center" min-width="100">
					 <template slot-scope="scope">
					   	<span  >{{scope.row.view_type==1?'项目组态':'全局组态'}}</span>
					 </template>
				</el-table-column> -->
				<el-table-column prop="draws_count" label="图纸数量" align="center" min-width="100">
				</el-table-column>
				<el-table-column prop="users_count" label="授权用户数" align="center" min-width="100">
				</el-table-column>
				<el-table-column prop="list_order" label="组态排序" align="center" min-width="100">
				</el-table-column>
				<el-table-column prop="visit_allow" label="显示终端" align="center" min-width="120">
					<template slot-scope="scope">
					  	<span  >{{scope.row.visit_allow=='all'?'手机和电脑':scope.row.visit_allow=='pc'?'仅限电脑':'仅限手机'}}</span>
					</template>
				</el-table-column>
				<!-- <el-table-column prop="equips_count" label="绑定设备数" align="center" min-width="120">
				</el-table-column> -->
				<!-- <el-table-column prop="add_time" label="添加时间" align="center" min-width="160">
				</el-table-column> -->
				<el-table-column v-if="grade<=2" label="操作" min-width="200" align="center">
					<template slot-scope="scope">
						<!-- <el-button type="primary" size="mini" @click="editInfo(scope.row)">修改信息</el-button> -->
						<el-button type="primary" size="mini" @click="showView(scope.row)">监控</el-button>
						<el-button v-if="(!scope.row.is_shared) && win.screen.width>=1360" type="primary" size="mini" @click="editView(scope.row)">编辑</el-button>
						<el-dropdown placement="bottom" @command="handleCommand" trigger="click" v-if="(!scope.row.is_shared)" style="margin-left:0.2rem;">
							<span type="primary" style="color:#409eff;cursor: pointer;">
								更多<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="info">修改信息</el-dropdown-item>
								<el-dropdown-item command="change">变量替换</el-dropdown-item>
								<!-- <el-dropdown-item command="share">分享组态</el-dropdown-item> -->
								<el-dropdown-item command="copy">复制组态</el-dropdown-item>
								<!-- <el-dropdown-item command="edit">编辑</el-dropdown-item> -->
								<el-dropdown-item command="delete">删除组态</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
						<!-- <el-button type="primary" size="mini" @click="lookView(scope.row)">查看</el-button> -->
						<!-- <el-button @click="copyTemplate(scope.row)" type="primary" size="mini">复制</el-button> -->
						<!-- <el-button @click="sureDelete(scope.row)" type="danger" size="mini">删除</el-button> -->
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination @size-change="handleSizeChange" @current-change="current_change" :current-page="queryParams.pageNo"
				 :page-size="queryParams.pageSize" :page-sizes="[10,15,20]" layout="total, sizes, prev, pager, next, jumper" :total="queryParams.total">
				</el-pagination>
			</div>
		</div>
		<el-dialog :visible="addFormVisible" width="500px" append-to-body :show-close="close" top="150px">
			<div class="toptit">
				<span>添加新组态</span>
				<span style="float:right;cursor: pointer;" @click="addFormVisible=false">关闭</span>
			</div>
			<el-form :model="addForm" style="text-align:left;" block>
				<!-- <el-form-item  label="组态类型:" :label-width="formLabelWidth">
					<el-select v-model="addForm.view_type" placeholder="选择类型" class="inpu" @change="changeViewType(addForm.view_type,'add')">
						<el-option v-for="item in viewTypes" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item> -->
				<el-form-item v-if="addForm.view_type==1" label="所属项目:" :label-width="formLabelWidth">
					<el-select v-model="addForm.product_id" placeholder="选择项目" class="inpu">
						<el-option v-for="item in products" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
					<!-- <el-cascader
						class="inpu"
						style="width:5rem;"
						v-model="addForm.product_id"
						:options="products"
						:props="{checkStrictly:true,expandTrigger:'hover',emitPath:false}">
					</el-cascader> -->
					<!-- <span class="tip">如果没有选择项，请先添加项目，否则设备无法添加！</span> -->
					<!-- <el-input v-model="form.name" auto-complete="off" class="inpu" style="transform: translateX(-0.8rem);" placeholder="输入项目名称"></el-input> -->
				</el-form-item>
				<el-form-item label="组态名称:" :label-width="formLabelWidth">
					<el-input class="inpu" v-model="addForm.view_name" placeholder="请输入组态名称"></el-input>
				</el-form-item>
				<el-form-item label="显示终端:" :label-width="formLabelWidth">
					<el-select v-model="addForm.visit_allow" placeholder="选择允许访问的终端" class="inpu" :disabled="addForm.view_type==2">
						<el-option v-for="item in visitTerminals" :key="item.value" :label="item.label"  :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="组态图片:" :label-width="formLabelWidth">
					<div class="newimg">
						<img id="new" ref="new" src="../../static/noimg.png" class="thumb" />
						<!-- <input type="file" id="addid" ref="addid" @change="addUpload" @click="addUpload" /> -->
						<input type="file" id="addid" ref="addid" @change="addUpload" />
						<div class="tip" style="display: block;margin-top:0.4rem;">点击上图可上传（或更换）图片<br>组态界面创建后，可更换为组态首页图纸截图</div>
					</div>
				</el-form-item>
				<el-form-item label="组态排序:" :label-width="formLabelWidth">
					<el-input class="inpu" v-model="addForm.list_order" style="width:2rem;" placeholder="请输入数字"></el-input>
				</el-form-item>
				<el-form-item style="height:0.6rem;width:100%;text-align: right;">
					<el-button size="small" @click="addFormVisible=false">取消</el-button>
					<el-button type="primary" size="small" @click="addSubmit">确认</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<el-dialog :visible="editFormVisible" width="500px" append-to-body :show-close="close" top="150px">
			<div class="toptit">
				<span>修改组态信息</span>
				<span style="float:right;cursor: pointer;" @click="editFormVisible=false">关闭</span>
			</div>
			<el-form :model="editForm" style="text-align:left;" block>
				<!-- <el-form-item label="组态类型:" :label-width="formLabelWidth">
					<el-select v-model="editForm.view_type" placeholder="选择类型" @change="changeViewType(editForm.view_type,'edit')" class="inpu">
						<el-option v-for="item in viewTypes" :key="item.value" :label="item.label"  :value="item.value">
						</el-option>
					</el-select>
				</el-form-item> -->
				<el-form-item v-if="editForm.view_type==1" label="所属项目:" :label-width="formLabelWidth">
					<el-select v-model="editForm.product_id" placeholder="选择项目" class="inpu">
						<el-option v-for="item in products" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
					<!-- <el-cascader
						class="inpu"
						style="width:5rem;"
						v-model="editForm.product_id"
						:options="products"
						:props="{checkStrictly:true,expandTrigger:'hover',emitPath:false}">
					</el-cascader> -->
				</el-form-item>
				<el-form-item label="组态名称:" :label-width="formLabelWidth">
					<el-input class="inpu" v-model="editForm.view_name" placeholder="请输入组态名称"></el-input>
				</el-form-item>
				<el-form-item label="显示终端:" :label-width="formLabelWidth">
					<el-select v-model="editForm.visit_allow" placeholder="选择允许访问的终端" class="inpu" :disabled="editForm.view_type==2">
						<el-option v-for="item in visitTerminals" :key="item.value" :label="item.label"   :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="上传图片:" :label-width="formLabelWidth">
					<div class="newimg">
						<img v-if="editForm.thumb" id="old" :src="baseurl+editForm.thumb" class="thumb" />
						<img v-else id="old" src="../../static/noimg.png" class="thumb" />
						<input type="file" id="editid" @change="editUpload" />
						<div class="tip" style="display: block;">点击上图可上传（或更换）图片<br>建议使用首页图纸界面截图</div>
					</div>
					<!-- <span class="tip" v-if="up">点击上图可上传（或更换）图片</span> -->
					<!-- <span class="tip" v-else>正在上传中...</span> -->
				</el-form-item>
				<el-form-item label="组态排序:" :label-width="formLabelWidth">
					<el-input class="inpu" v-model="editForm.list_order" style="width:2rem;" placeholder="请输入数字序号"></el-input>
				</el-form-item>
				<el-form-item style="height:0.6rem;width:100%;text-align: right;">
					<el-button size="small" @click="editFormVisible=false">取消</el-button>
					<el-button type="primary" size="small" @click="editSubmit">确认</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<el-dialog :visible="copyFormVisible" width="500px" append-to-body :show-close="close" top="180px">
			<div class="toptit">
				<span>复制组态</span>
				<span style="float:right;cursor: pointer;" @click="copyFormVisible=false">关闭</span>
			</div>
			<el-form :model="copyForm" style="text-align:left;" block>
				<el-form-item label="所属项目:" :label-width="formLabelWidth">
					<el-select v-model="copyForm.product_id" placeholder="选择项目" class="inpu">
						<el-option v-for="item in products" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
					<!-- <el-cascader
						class="inpu"
						style="width:5.5rem;"
						v-model="copyForm.product_id"
						:options="products"
						:props="{checkStrictly:true,expandTrigger:'hover',emitPath:false}">
					</el-cascader> -->
				</el-form-item>
				<el-form-item label="组态名称:" :label-width="formLabelWidth">
					<el-input class="inpu" v-model="copyForm.view_name" placeholder="请输入新组态名称"></el-input><br>
					<div class="tip" style="display: block;margin-top:0.3rem;">为防止重名，已加“副本”字样,可修改</div>
				</el-form-item>
				<el-form-item style="height:0.6rem;width:100%;text-align: right;">
					<el-button size="small" @click="copyFormVisible=false">取消</el-button>
					<el-button type="primary" size="small" @click="copySubmit">确认</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<!-- 单个设备分享点击弹出框 -->
		<el-dialog :visible="shareViewList" width="1000px" append-to-body :show-close="close" top="150px">
		   <div class="toptit">
			<span>分享组态列表</span>
			<span style="float:right;cursor: pointer;" @click="shareViewList=false">关闭</span>
		   </div>
		   <div class="header_bottom" >
		   	<el-button type="success" @click="addSingleShare(nowRow)" size="small">添加新分享</el-button>
		   	<el-button type="primary" @click="showShare" size="small" v-if="all">刷新全部</el-button>
		   </div>
		   <div class="container_table" style="height:10rem;overflow:auto;margin-top:0.1rem;">
		   <el-table :data="tableShareData" size="small" border style="width: 99.4%;"
		    :header-cell-style="{
		   	'background-color':tableHead,
		   	'color': 'white',
		    'fontSize':'0.3rem',
			'height':'0.6rem',
			'line-height':'0.6rem',
			'padding':'0.1rem'

		    }" :cell-style="{'fontSize':'0.3rem'}">
		   	<!-- <el-table-column type="selection" min-width="30">
		   	</el-table-column> -->
		   	<el-table-column label="ID" prop="id" align="center" min-width="50">
		   	</el-table-column>
		   	<el-table-column prop="user_name" label="用户名称" align="center" min-width="150">
		   	</el-table-column>
		    <el-table-column prop="view_name" label="组态名称" align="center" min-width="160">
		   	</el-table-column>
		   	<el-table-column prop="enable_write" label="设备控制" align="center" min-width="120">
				<template slot-scope="scope">
					<i :class="scope.row.enable_write?'el-icon-check':'el-icon-close'"></i>
					<!-- <el-switch v-model="scope.row.enable_write" disabled class="mar_l_2" :width="stateWidth1" active-color="#13ce66"
					 inactive-color="#ccc" active-text="开" inactive-text="关" :active-value="one" :inactive-value="zero">
					</el-switch> -->
				</template>
		   	</el-table-column>
		   	<!-- <el-table-column prop="enable_edit" label="组态编辑" align="center" min-width="120">
				<template slot-scope="scope">
					<i :class="scope.row.enable_edit?'el-icon-check':'el-icon-close'"></i>
				</template>
		   	</el-table-column> -->
		    <el-table-column  label="操作" min-width="160" align="center">
		   		<template slot-scope="scope">
		   		    <el-button type="primary" size="mini" @click="shareEdit(scope.row)">编辑</el-button>
		   			<el-button type="danger" size="mini" @click="sureDeleteView(scope.row)">删除</el-button>
		   		</template>
		   	</el-table-column>
		   </el-table>
		   </div>
		</el-dialog>
		<el-dialog :visible="shareViewVisible" width="500px" append-to-body :show-close="close" top="220px">
			<div class="toptit">
				<span>添加组态分享</span>
				<span style="float:right;cursor: pointer;" @click="shareViewVisible=false">关闭</span>
			</div>
			<el-form :model="viewShareForm" style="text-align:left;" block>
				<el-form-item label="　　组态名称:">
					<el-input class="inpu" v-model="viewShareForm.view_name" disabled></el-input>
				</el-form-item>
				<el-form-item label="　　分享对象:">
					<el-autocomplete popper-class="my-autocomplete" class="inpu" v-model="viewShareForm.mobile" :fetch-suggestions="querySearch"
					 placeholder="请输入分享者手机号" @select="handleSelect">
						<template slot-scope="{ item }">
							<div class="name">{{ item.value }}</div>
							<!-- <span class="addr">{{ item.address }}</span> -->
						</template>
					</el-autocomplete>
				</el-form-item>
				<el-form-item  label="　　设备控制:">
					<el-switch v-model="viewShareForm.enable_write" :width="stateWidth" class="demo" style="display:inline-block;vertical-align:top;transform: translateX(-0.4rem);margin-right:0;"
					 active-color="#13ce66" inactive-color="#ccc" active-text="开" inactive-text="关" :active-value="one"
					 :inactive-value="zero">
					</el-switch>
				</el-form-item>
				<!-- <el-form-item label="　　组态编辑:">
					<el-switch v-model="viewShareForm.enable_edit" :width="stateWidth" class="demo" style="display:inline-block;vertical-align:top;transform: translateX(-0.4rem);margin-right:0;"
					 active-color="#13ce66" inactive-color="#ccc" active-text="开" inactive-text="关" :active-value="one"
					 :inactive-value="zero">
					</el-switch>
				</el-form-item> -->
		        <el-form-item style="height:0.6rem;width:100%;text-align: right;">
					<el-button size="small" @click="shareViewVisible=false">取消</el-button>
					<el-button type="primary" size="small" @click="shareSubmit">分享</el-button>
				</el-form-item>
			</el-form>

		</el-dialog>
		<!-- 弹出框结束 -->
		<el-dialog :visible="shareEditVisible" width="500px" append-to-body :show-close="close" top="220px">
			<div class="toptit">
				<span>编辑组态分享</span>
				<span style="float:right;cursor: pointer;" @click="shareEditVisible=false">关闭</span>
			</div>
			<el-form :model="viewShareEditForm" style="text-align:left;" block>
				<el-form-item label="　　组态名称:">
					<el-input class="inpu" v-model="viewShareEditForm.view_name" disabled></el-input>
				</el-form-item>
				<el-form-item label="　　分享对象:">
					<span class="inpu" style="width:6rem;">{{viewShareEditForm.user_name}}</span>
				</el-form-item>
				<el-form-item  label="　　设备控制:">
					<el-switch v-model="viewShareEditForm.enable_write" :width="stateWidth" class="demo" style="display:inline-block;vertical-align:top;transform: translateX(-0.4rem);margin-right:0;"
					 active-color="#13ce66" inactive-color="#ccc" active-text="开" inactive-text="关" :active-value="one"
					 :inactive-value="zero">
					</el-switch>
				</el-form-item>
				<!-- <el-form-item label="　　组态编辑:">
					<el-switch v-model="viewShareEditForm.enable_edit" :width="stateWidth" class="demo" style="display:inline-block;vertical-align:top;transform: translateX(-0.4rem);margin-right:0;"
					 active-color="#13ce66" inactive-color="#ccc" active-text="开" inactive-text="关" :active-value="one"
					 :inactive-value="zero">
					</el-switch>
				</el-form-item> -->
		        <el-form-item style="height:0.6rem;width:100%;text-align: right;">
					<el-button size="small" @click="shareEditVisible=false">取消</el-button>
					<el-button type="primary" size="small" @click="shareEditSubmit">确认</el-button>
				</el-form-item>
			</el-form>

		</el-dialog>
		<!-- <div v-if="stageId" >
			<iframe src="" width="0" height="0" scrolling="no" frameborder="no" ref="readStage"></iframe>
		</div> -->

	</div>
</template>

<script>
	export default {
		name: 'viewList',
		data() {
			return {
			    win:window,
				all: false,
				close:false,
				one:1,
				zero:0,
				ws:'',
				isFirst:true,
				grade:Number(localStorage.getItem("atuser_type")),
				baseurl: this.$baseurl,
				stateWidth: 56,
				stateWidth1: 66,
				formLabelWidth:'80px',
				addFormVisible:false,
				editFormVisible:false,
				copyFormVisible:false,
				dialogVisible:false,
				shareViewList:false,
				shareViewVisible:false,
				shareEditVisible:false,
				products:[],
				addForm:{
				   product_id:1,
				   view_name:'',
				   list_order:50,
				   visit_allow:'all',
				   view_type:1
				   //image:'',
				},
				editForm:{
				   id:0,
				   product_id:0,
				   view_name:'',
				   visit_allow:'all',
				   view_type:1,
				   list_order:50,
				   thumb:'',
				},
				copyForm:{
				   id:0,
				   product_id:0,
				   view_name:'',
				   visit_allow:'',
				   view_type:1,
				   list_order:50,
				   thumb:'',
				},
				viewShareForm:{
					mobile:'',
					view_id:0,
					enable_write:1,
					enable_edit:0
				},
				viewShareEditForm:{},
				nowRow:{
					id:0,
					view_uid:0,
					product_id:0,
					view_name:"",
					visit_allow:'',
					view_type:1,
					product_name: "",
					list_order:50,
					draws_count: 0,
					users_count: 0,
					equips_count: 0
				},
				mobiles:[],
				option:0,
				options:[],
				searchOptions:[{
					value:0,
					label:'全部'

				}],
				viewTypes:[
					{
					    value:1,
						label:'项目组态'
				    },
					{
						value:2,
						label:'全局大屏'
					}
				],
				visitTerminals:[
					{
						value:'all',
						label:'手机和电脑'
					},
					{
						value:'pc',
						label:'仅限电脑'
					},
					{
						value:'mobile',
						label:'仅限手机'
					}
				],
				//dialogFormVisible:false,
				// copyForm:{
				// 	id:0,
				// 	template_name:'',
				// 	new_name:'',
				// 	new_remark:'',
				// 	remark:''
				// },
				search_commodity: '', //输入框内容
				queryParams: {
					pageNo: 1,
					pageSize: 10,
					total: 0
				},
				tableHead:localStorage.getItem("bgcolor"),
				tableShareData:[],
				tabledata: [],
				stageId:0

            }
		},

		created() {
			this.queryParams.pageNo=Number(localStorage.getItem("currentViewNo")) || 1;
			this.option = Number(localStorage.getItem('viewOption')) || 0;
			this.search_commodity = localStorage.getItem('viewKey') || '';
			if (this.option || this.search_commodity) {
				this.all = true;
			}
			this.showList(this.queryParams.pageNo, this.queryParams.pageSize,this.option,this.search_commodity);
		},

		mounted(){
			this.getProduct();
		},

		beforeRouteLeave(to, from, next) {
			var that=this;
			// 可以访问组件实例 `this`
			//console.log(to.name);
			if(['showView','changeVar','editStage'].indexOf(to.name)<0) {
				localStorage.removeItem('currentViewNo');
				localStorage.removeItem('viewOption');
				localStorage.removeItem('viewKey');
			}else{
				localStorage.setItem("currentViewNo", that.queryParams.pageNo);
				localStorage.setItem('viewOption',that.option);
				localStorage.setItem("viewKey", that.search_commodity);
			}
			next();
		},

        methods: {
			getProduct(){
				var that=this;
				this.$http({
					method: 'post',
					url: '/api/product/tree',
					data: {}
				}).then(res => {
					if (res && res.data.result == "success") {
						this.products=res.data.data;
						this.searchOptions=[{value:0,label:'全部'},...this.products];

					}
					//console.log("charu")
				}).catch(error => {

					console.log(error);
				});
			},

			current_change: function(currentPage) {
				this.queryParams.pageNo = currentPage;
				//this.isFirst = false;
				this.showList(currentPage, this.queryParams.pageSize,this.option,this.search_commodity);
			},
			handleSizeChange(val) {
				this.queryParams.pageSize = val;
				//this.isFirst = false;
				this.showList(this.queryParams.pageNo, val,this.option,this.search_commodity);
			},

			//获取数据函数
			showList: function(num, size,option, keyword) {
				var that = this;
				this.$http({
						method: 'post',
						url: 'api/view/lists',
						data: {
							'user_id':localStorage.getItem("at_userId"),
							'limit': size,
							'page': num,
							'product_id':option,
							'keyword': keyword
						}
					}).then(res => {
						if (res && res.data.result == "success") {
							that.tabledata = res.data.data;
							this.queryParams.total = res.data.count;
							// if(this.isFirst){
							//    this.showFirstDraw(res.data.data[0].id);
							//    this.isFirst = false;
							// }
						}
					}).catch(error => {
						console.log(error);
						this.tabledata = [];
						this.queryParams.total = 0;
						this.queryParams.pageNo = 1;
					});
			},

			//预加载获取组态编辑资源
			// showFirstDraw: function(id) {
			// 	var that = this;
			// 	this.$http({
			// 			method: 'post',
			// 			url: 'api/draw/all',
			// 			data: {
			// 				'view_id':id

			// 				//'keyword': keyword
			// 			}
			// 		}).then(res => {
			// 			if (res && res.data.result == "success") {
			// 				this.stageId=res.data.data[0].id;
			// 				this.isFirst = false;
			// 				setTimeout(function(){
			// 					that.$refs.readStage.src='static/optionZT/index_edit.html?stageId='+that.stageId;
			// 				},500)
			// 				//this.url='static/optionZT/index_edit.html?stageId='+this.stageId+'&selectOneWhere='+this.optionId;
			// 			}
			// 		}).catch(error => {
			// 			console.log(error);
			// 			this.drawList = [];

			// 		});
			// },

			getInfo(id){
				this.$http({
						method: 'post',
						url: 'api/view/info',
						data: {
							'id':id

                        }
					}).then(res => {
						if (res && res.data.result == "success") {
							//console.log(res.data.data);
							for(let key in this.editForm){
								this.editForm[key]=res.data.data[key];
							}
							this.editForm.thumb = res.data.data.view_thumb?res.data.data.view_thumb:'';
							this.ws = res.data.data.view_thumb?res.data.data.view_thumb:'';
						}
					}).catch(error => {
						console.log(error);
					});
			},

			getRow(row) {
				for (var key in this.nowRow) {
					this.nowRow[key] = row[key];
				}
				//console.log(this.nowRow);
			},

			handleCommand(command) {
				var that = this;
				switch (command) {
					case 'info':
						setTimeout(function() {
							that.editInfo(that.nowRow.id);
						}, 300)
						break;
					// case 'look':
					// 	setTimeout(function() {
					// 		that.showView(that.nowRow);
					// 	}, 300)
					// 	break;
					case 'copy':
						setTimeout(function() {
							that.copyView(that.nowRow);
						}, 300);
						break;
					case 'share':
						setTimeout(function() {
							that.showShare(that.nowRow);
						}, 300);
						break;
					case 'change':
						setTimeout(function() {
							that.changeVar(that.nowRow);
						}, 300);
						break;

					// case 'edit':
					// 	setTimeout(function() {
					// 		that.editView(that.nowRow);
					// 	}, 300);
					// 	break;
					case 'delete':
						setTimeout(function() {
							that.sureDelete(that.nowRow);
						}, 300);
						break;
				}
			},
			// 点击搜索输入框里的内容
			searchGoods: function() {
				this.all = true;
				this.queryParams.pageNo=1;
				this.showList(1, this.queryParams.pageSize,this.option, this.search_commodity);
			},

			showAll() {
				this.all = false;
				this.queryParams.pageNo=1;
				this.option=0;
				this.search_commodity = '';
				this.showList(1, this.queryParams.pageSize,0);
			},

			showView(row){
				this.$router.push({
					name: 'showView',
					path: 'showView',
					component: 'showView'
				});
				localStorage.setItem("editViewId", row.id);
				localStorage.setItem("viewType", row.view_type);
				localStorage.setItem("editViewName", row.view_name);

			},

			changeVar(row){
				this.$router.push({
					name: 'changeVar',
					path: 'changeVar',
					component: 'changeVar'
				});
				localStorage.setItem("optionId", row.product_id);
				localStorage.setItem("editViewId", row.id);
				localStorage.setItem("editViewName", row.view_name);

			},



			editView(row){
				this.$router.push({
					name: 'editStage',
					path: 'editStage',
					component: 'editStage'
				});
				localStorage.setItem("editViewId", row.id);
				localStorage.setItem("viewType", row.view_type);
				localStorage.setItem("optionId", row.product_id);
				localStorage.setItem("editViewName", row.view_name);

			},

			copyView(row){
			    this.copyForm.product_id=row.product_id;
				this.copyForm.id=row.id;
				this.copyFormVisible = true;
				this.copyForm.view_name=row.view_name+"(副本)";
			},

			copySubmit(){
				this.$http({
					method: 'post',
					url: 'api/view/copy',
					data: {
						"id":this.copyForm.id,
						"product_id": this.copyForm.product_id,
						"view_name":this.copyForm.view_name
					}
				}).then(res => {
					if ( res && res.data.result == "success") {
						this.$message({
							message: '恭喜,复制组态成功!',
							type: 'success',
							center: true
						});
						this.showList(this.queryParams.pageNo, this.queryParams.pageSize,this.option, this.search_commodity);
					}

				}).catch(error => {
					console.log(error);

				});
				this.copyFormVisible = false;
			},

			add() {
			    this.addForm.product_id=this.products[0].value;
				this.ws = '';
				this.addForm.view_name='';
				this.addForm.visit_allow='all';
				this.addFormVisible = true;
				//document.getElementById("new").src='../../static/noimg.png';
			},

			addUpload() {
				this.ws='';
			    var that = this;
			    var fileLen = document.getElementById("addid").files;
				this.ws = fileLen[0]?fileLen[0]:'';
				//console.log(this.ws);
				var reads = new FileReader();
				reads.readAsDataURL(that.ws);
				reads.onload = function(e) {
					document.getElementById("new").src = this.result;
				}
			},

			editUpload() {
				var that = this;
				var fileLen = document.getElementById('editid').files;
				this.ws = fileLen[0]?fileLen[0]:'';
				var reads = new FileReader();
				reads.readAsDataURL(this.ws);
				reads.onload = function(e) {
					document.getElementById('old').src = this.result;
				}
			},

			addSubmit(){
				//console.log(this.ws);
				var that=this;
				var upform = new FormData();
				upform.append("view_name", that.addForm.view_name);
				upform.append("view_thumb", that.ws?that.ws:'');
				upform.append("product_id", that.addForm.product_id);
				upform.append("visit_allow", that.addForm.visit_allow);
				upform.append("view_type", that.addForm.view_type);
				upform.append("list_order", that.addForm.list_order);
				this.$http({
						method: 'post',
						url: 'api/view/add',
						data: upform
					}).then(res => {
						if (res && res.data.result == "success") {
							this.$message({
								message: '恭喜,添加组态成功!',
								type: 'success',
								center: true
							})
						    //document.getElementById("addid").files=[];
							this.addFormVisible=false;
							this.showList(this.queryParams.pageNo, this.queryParams.pageSize,this.option,this.search_commodity);

						}
					}).catch(error => {
						console.log(error);

					});
			},

			editInfo(id){
				//this.getProduct();
				this.ws='';
				this.editForm.thumb = "";
				this.editFormVisible=true;
				this.getInfo(id);
			},

			editSubmit(){
				var that=this;
				var upform = new FormData();
				upform.append("id", that.editForm.id);
				upform.append("view_name", that.editForm.view_name);
				upform.append("view_thumb", that.ws?that.ws:'');
				upform.append("product_id", that.editForm.product_id);
				upform.append("visit_allow", that.editForm.visit_allow);
				upform.append("view_type", that.editForm.view_type);
				upform.append("list_order", that.editForm.list_order);
			    this.$http({
						method: 'post',
						url: 'api/view/update',
						data: upform
					}).then(res => {
						if (res && res.data.result == "success") {
							this.$message({
								message: '恭喜,修改组态信息成功!',
								type: 'success',
								center: true
							})
							this.showList(this.queryParams.pageNo, this.queryParams.pageSize,this.option,this.search_commodity);
						    this.editFormVisible=false;
						}
					}).catch(error => {
						console.log(error);

				});
			},

			changeViewType(val,oper){
				if(val==2){
					if(oper=='add'){
						this.addForm.visit_allow='pc';
					}else{
						this.editForm.visit_allow='pc';
					}

				}
			},

			querySearch(queryString, cb) {
				var mobiles = this.mobiles;
				var results = queryString ? mobiles.filter(this.createFilter(queryString)) : mobiles;
				// 调用 callback 返回建议列表的数据
				cb(results);
			},
			createFilter(queryString) {
				return (mobile) => {
					return (mobile.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
				};
			},

			handleSelect(item) {
				console.log(item);
			},

			getMobile() {
				var that = this;
				this.mobiles = [];
				this.$http({
					method: 'post',
					url: 'api/viewAuth/users',
					data: {}
				}).then(res => {
					if (res && res.data.result == "success") {
						for (var i = 0; i < res.data.data.length; i++) {
							var mobile = {
								value: res.data.data[i].mobile.toString(),
								label: res.data.data[i].mobile
							}
							that.mobiles.push(mobile);
						}
						//that.singleShareForm.mobile = that.mobiles[0].value;
					}

				}).catch(error => {
					console.log(error);
				});

			},

			showShare(row){
				this.shareViewList = true;
				this.shareAll(row.id)

			},

			shareAll(id){
				var that = this;
				this.tableShareData = [];
				this.$http({
					method: 'post',
					url: 'api/viewAuth/all',
					data: {
						"view_id":id
					}
				}).then(res => {
					if (res && res.data.result == "success") {
						this.tableShareData=res.data.data;
						//that.singleShareForm.mobile = that.mobiles[0].value;
					}

				}).catch(error => {
					console.log(error);
				});
			},

			addSingleShare(row) {
				this.shareViewVisible = true;
				this.getMobile();
				this.viewShareForm.view_name=row.view_name;
				this.viewShareForm.view_id=row.id;

			},

			shareSubmit() {
				var that = this;
				this.$http({
					method: 'post',
					url: 'api/viewAuth/add',
					data: this.viewShareForm
				}).then(res => {
					if (res && res.data.result == "success") {
						this.$message({
							message: '恭喜，分享组态成功!',
							type: 'success',
							center: true
						});
						this.shareAll(that.nowRow.id);
					}
				}).catch(error => {
					console.log(error)
				});
				this.shareViewVisible = false;
			},

			shareEdit(row) {
				this.shareEditVisible = true;
				this.viewShareEditForm=Object.assign({},row);
				//this.getEquip(row.id);
			},

			shareEditSubmit(){
				var that = this;
				this.$http({
					method: 'post',
					url: 'api/viewAuth/update',
					data: this.viewShareEditForm
				}).then(res => {
					if (res && res.data.result == "success") {
						this.$message({
							message: '恭喜，修改组态成功!',
							type: 'success',
							center: true
						});
						this.shareAll(that.nowRow.id);
					}
				}).catch(error => {
					console.log(error)
				});
				this.shareEditVisible = false;
			},

			sureDelete(row) {
				this.$confirm('删除组态将删除组态下所有图纸,并且不可恢复,是否确认删除该组态?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.handleClick(row);
				}).catch(() => {
					// this.$message({
					// 	type: 'info',
					// 	message: '已取消删除'
					// });
				});
			},

			handleClick(row) {
				var that = this;
                this.$http({
					method: 'post',
					url: 'api/view/delete',
					data: {
						"id": row.id
					}
				}).then(res => {
					if ( res && res.data.result == "success") {
						this.$message({
							message: '恭喜,删除组态成功!',
							type: 'success',
							center: true
						});
						this.showList(this.queryParams.pageNo, this.queryParams.pageSize,this.option, this.search_commodity);
					}

				}).catch(error => {
					console.log(error);

				});

			},

			sureDeleteView(row) {
				this.$confirm('删除分享后,该用户将无法查看该组态,是否确认删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.handleClickView(row);
				}).catch(() => {
					// this.$message({
					// 	type: 'info',
					// 	message: '已取消删除'
					// });
				});
			},

			handleClickView(row) {
				var that = this;
			    this.$http({
					method: 'post',
					url: 'api/viewAuth/delete',
					data: {
						"id": row.id
					}
				}).then(res => {
					if ( res && res.data.result == "success") {
						this.$message({
							message: '删除分享成功!',
							type: 'success',
							center: true
						});
						this.shareAll(that.nowRow.id);
					}

				}).catch(error => {
					console.log(error);

				});

			}
        }
	}
</script>

<style scoped>
	@media all and (max-width:1440px) {
		.inpu{
			width:6rem!important;
		}
	}

	.inpu{
		width:5rem;
		margin-right:0.4rem;
	}

	.tip{
		display:block;
		color: #FF5722;
		font-size: 0.25rem;
		line-height: 0.4rem;
		margin-top:0.1rem!important;
		/* border:1px solid red; */
		transform: translateY(0);
	}

	#addid,#editid {
		width: 1.8rem;
		height: 1.8rem;
		/* border:1px solid red; */
		overflow: hidden;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 12;
		opacity: 0;
	}

	.thumb {
		width: 1.8rem;
		height: 1.8rem;
	}

	.el-icon-check {
		font-size: 0.4rem;
		color: forestgreen;
	}

	.el-icon-close {
		font-size: 0.4rem;
		color: red;
	}
</style>
